<template>
  <slot :list="list.data" :pageMode="list" />

  <div class="loading" v-if="list.loading && list.data.length === 0">
    <wd-loading type="outline" color="#8a8f99" size="40px" />
  </div>

  <!-- 为空 -->
  <template v-if="list.data.length === 0 && !list.loading">
    <slot name="empty">
      <div class="py-100rpx">
        <wd-status-tip image="search" tip="当前无结果" />
      </div>
    </slot>
  </template>

  <!-- 加载更多 -->
  <div class="load-more" v-if="list.data.length > 0">
    <wd-loadmore
      v-if="list.data.length > 5"
      :state="list.isMore ? 'loading' : 'finished'"
      finished-text="没有更多了"
    />
  </div>
</template>
<script setup lang="ts">
import { http } from '@/utils/http'
defineOptions({ name: 'LoadPage' })

const props = defineProps({
  url: {
    type: String,
    default: '',
  },
  // 一页数据条数
  pageSize: {
    type: Number,
    default: 20,
  },
  // 是否立即执行
  immediate: {
    type: Boolean,
    default: true,
  },
  // 返回数据处理函数，返回值对象数据为 { list: [], total:  }
  dataHandling: {
    type: Function,
  },

  // 占位测试数据，如果传入，则不请求数据
  testList: {
    type: Array,
    default: () => [],
  },
})

const list = reactive({
  data: [],
  pageNo: 1,
  pageSize: props.pageSize,
  loading: true,
  isMore: false,
})

if (props.immediate) {
  getData({}, true)
}

function getData(filter = {}, isRefresh = false) {
  if (isRefresh) {
    list.pageNo = 1
  } else {
    list.pageNo++
  }

  // 没有更多数据了
  if (!list.isMore && !isRefresh) {
    return
  }

  list.loading = true
  list.isMore = true
  if (props.testList.length > 0) {
    setTimeout(() => {
      if (list.pageNo === 1) {
        list.data = props.testList
      } else {
        list.data = list.data.concat(props.testList)
      }
      list.isMore = list.pageNo < 3
      list.loading = false
      uni.stopPullDownRefresh()
    }, 800)
  } else {
    http
      .get(props.url, {
        ...filter,
        current: list.pageNo,
        size: list.pageSize,
      })
      .then((res: any) => {
        let resList = res.records
        let resTotal = res.total

        // 如果配置了数据处理函数，则调用
        if (props.dataHandling) {
          const handData = props.dataHandling(resList)
          if (handData.list != undefined && handData.total != undefined) {
            resList = handData.list
            resTotal = handData.total
          } else {
            console.error('dataHandling函数返回值格式错误')
          }
        }

        if (list.pageNo === 1) {
          list.data = resList
        } else {
          list.data = list.data.concat(resList)
        }
        list.isMore = list.data.length < resTotal // 是否还有数据
      })
      .finally(() => {
        list.loading = false
        uni.stopPullDownRefresh()
      })
  }
}

defineExpose({
  getData,
  // 上拉加载更多
  getMore(filter) {
    if (!list.loading && list.isMore) {
      getData(filter)
    }
  },
})
</script>
<style lang="scss" scoped>
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
}
.load-more {
  padding-bottom: 20rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx) !important;
}
</style>
